import { Device } from "@/api/interface/iot";
import { getNotifyRecordList } from "@/api/modules/notification";
import DialogBox from "@/components/DialogBox";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ElTag } from "element-plus";
import moment from "moment";
import NotifyDetail from "./components/notifyDetail";
export default defineComponent({
	setup() {
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "type", label: "通知类型", width: "100", search: { el: "input" } },
			{ prop: "userName", label: "通知对象", width: "100" },
			{ prop: "sn", label: "设备序列号", width: "180", search: { el: "input" } },
			{
				prop: "createTime",
				label: "通知时间",
				width: "180"
			},
			{
				prop: "timestamp",
				label: "通知时间",
				search: { slot: {} },
				isShow: false
			},
			{ prop: "content", label: "通知内容", search: { el: "input" }, align: "left" },
			{ prop: "operate", label: "更多", width: "80" }
		];
		const buttonsList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			buttonsList.value = await useAuthButtons();
		});
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const getTableList = async (params: any) => {
			return getNotifyRecordList(params);
		};
		const currentItem = ref({});
		const handerBtn = (fn: string, row: any) => {
			switch (fn) {
				case "details":
					currentItem.value = row.row;
					detailDialog.visible = true;
					break;
			}
		};
		const detailDialog = reactive({ visible: false, title: "通知详情" });
		const proTableRef = ref();
		const initParam = reactive<Device.ReqDeviceParam>({});
		const timestamp = ref();
		const changeTimestamp = (e: any) => {
			initParam.timestamp = e && `${e[0]}~${e[1]}`;
		};

		return () => {
			return (
				<div class="hist-alarm-page">
					<DialogBox width="500" title={detailDialog.title} v-model:visible={detailDialog.visible} hideFooter>
						<NotifyDetail detail={currentItem.value}></NotifyDetail>
					</DialogBox>
					<ProTable
						ref={proTableRef}
						columns={columns}
						title={buttonsList.value.length ? "" : "通知列表"}
						requestApi={getTableList}
						dataCallback={dataCallback}
						initParam={initParam}
					>
						{{
							"search-timestamp": () => {
								return (
									<el-date-picker
										v-model={timestamp.value}
										type="daterange"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期"
										valueFormat="YYYY-MM-DD HH:mm:ss"
										onChange={changeTimestamp}
									></el-date-picker>
								);
							},
							tableHeader: (scope: any) => {
								return buttonsList.value?.map((item: any) => {
									return (
										<el-button onClick={() => handerBtn(item.path, scope)} type={item.btnClass}>
											<i class={`iconfont ${item.icon}`}></i>
											{item.menuName}
										</el-button>
									);
								});
							},
							createTime: (scope: any) => {
								return moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss");
							},
							content: (scope: any) => {
								if (!scope.row.content) return "";
								let val = JSON.parse(scope.row.content)[0];
								let tag: any = { name: "", type: "success" };
								if (val.hasOwnProperty("message")) {
									tag = { name: "消息", type: "", content: val.message + val.sn };
								} else if (val.hasOwnProperty("email")) {
									tag = { name: "邮件", type: "success", content: val.email };
								} else {
									tag = { name: "其他", type: "info" };
								}
								return (
									<div>
										<ElTag type={tag.type} class="mr-2">
											{tag.name}
										</ElTag>
										{tag.content}
									</div>
								);
							},
							operate: (scope: any) => {
								return (
									<>
										<el-link type="primary" link class="iconfont iconbx-file" onClick={() => handerBtn("details", scope)}>
											详情
										</el-link>
									</>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
